<template>
  <div class="product-lifeCycle" style="padding: 20px">
    <topSelect :isFamily="0" @getSelectData="getSelectData"></topSelect>
    <el-card style="margin-bottom: 20px" v-if="lifeCycleTableShow">
      <div class="lifeCycle-table">
        <el-table
          :data="lifeCycleTableData"
          border
          style="width: 100%">
          <el-table-column
            prop="family_shipment"
            label="Shipment"
            width="180">
          </el-table-column>
          <el-table-column
            prop="family"
            label="Product"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ss_date"
            label="SS Date">
          </el-table-column>
          <el-table-column
            prop="eol_date"
            label="EOL Date">
          </el-table-column>
          <el-table-column
            prop="ca"
            label="CA(K)">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-row :gutter="10" class="progress-part" style="margin-bottom: 20px">
      <el-col :span="12">
        <el-card style="min-height: 136px">
          <div class="chart-title">{{$t('productLifeCycle.PlanExitVolume')}}</div>
          <div class="progress-data">
            <div class="noData" v-if="noData1">No Data</div>
            <div v-else>
              <el-row class="progress-box">
                <el-col :span="3">
                  <span>{{progressTitleOne}}</span>
                </el-col>
                <el-col :span="21">
                  <cbiProgress
                    title="Plan exit volume" :shipment="progressTitleOne" :volumeOrLife="volumeOrLifeOne"
                    :text-inside="true"
                    :stroke-width="40" :percentage="progressDataOne"
                  ></cbiProgress>
                </el-col>
              </el-row>
              <el-row class="progress-box progress-box-vs" v-show="vsIsShow">
                <el-col :span="3">
                  <span>{{progressVsTitleOne}}</span>
                </el-col>
                <el-col :span="21">
                  <cbiProgress
                    title="Plan exit volume" :shipment="progressVsTitleOne" :volumeOrLife="volumeOrLifeVsOne"
                    :text-inside="true"
                    :stroke-width="40" :percentage="progressVsDataOne"
                    strokeColor="#4DCFA3"
                  ></cbiProgress>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="min-height: 136px">
          <div class="chart-title">{{$t('productLifeCycle.LifecycleAttain')}}</div>
          <div class="progress-data">
            <div class="noData" v-if="noData2">No Data</div>
            <div v-else>
              <el-row class="progress-box">
                <el-col :span="3">
                  <span>{{progressTitleTwo}}</span>
                </el-col>
                <el-col :span="21">
                  <cbiProgress
                    title="Lifecycle attain" :shipment="progressTitleTwo" :volumeOrLife="volumeOrLifeTwo"
                    :text-inside="true"
                    :stroke-width="40" :percentage="progressDataTwo"
                  ></cbiProgress>
                </el-col>
              </el-row>
              <el-row class="progress-box progress-box-vs" v-show="vsIsShow">
                <el-col :span="3">
                  <span>{{progressVsTitleTwo}}</span>
                </el-col>
                <el-col :span="21">
                  <cbiProgress
                    title="Lifecycle attain" :shipment="progressVsTitleTwo" :volumeOrLife="volumeOrLifeTwo"
                    :text-inside="true"
                    :stroke-width="40" :percentage="progressVsDataTwo"
                    strokeColor="#4DCFA3"
                  ></cbiProgress>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-bottom: 20px">
      <div class="chart-range-box">
        <div class="chart-range-title">{{$t('productLifeCycle.CAComparisonByRange')}}</div>
        <div class="chart-range" id="chart-range" v-loading="loading.chartRange"></div>
      </div>
    </el-card>
    <el-card style="overflow: visible">
      <div class="chart-quarter-box">
        <div class="header">
          <div class="chart-quarter-title">{{$t('productLifeCycle.CAComparisonByFYQuarter')}}</div>
          <div class="chart-quarter-select">
            <div class="time-select">
              <span>{{$t('productLifeCycle.timeRange')}}</span>
              <div class="time-select-quarter" v-if="timeButton">
                <q-select v-model="selectTime1" :time="qshijian" :startT="shijianfangwei1"
                          :endT="shijianfangwei2" @change="selectTimeChange1"></q-select>
                <span style="margin: 0 2px">{{$t('filter.to')}}</span>
                <q-select v-model="selectTime2" :time="qshijian" :startT="shijianfangwei1"
                          :endT="shijianfangwei2" @change="selectTimeChange2"></q-select>
              </div>
              <el-row class="time-select-month" v-else>
                <el-date-picker
                  v-model="selectTime1"
                  @change="selectTimeChange1"
                  format="yyyy/MM"
                  value-format="yyyyMM"
                  type="month"
                  :placeholder="$t('filter.month')">
                </el-date-picker>
                <span style="margin: 0 2px">{{$t('filter.to')}}</span>
                <el-date-picker
                  v-model="selectTime2"
                  @change="selectTimeChange2"
                  format="yyyy/MM"
                  value-format="yyyyMM"
                  type="month"
                  :placeholder="$t('filter.month')">
                </el-date-picker>
              </el-row>
            </div>
            <div class="time-button">
              <el-button-group>
                <el-button :type="timeButton?'primary':''" @click="changeTimeButton">
                  {{$t('productLifeCycle.quarter')}}
                </el-button>
                <el-button :type="!timeButton?'primary':''" @click="changeTimeButton2">
                  {{$t('productLifeCycle.month')}}
                </el-button>
              </el-button-group>
            </div>
          </div>
        </div>
        <div class="chart-quarter" id="chart-quarter" v-loading="loading.chartQuarter"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import qSelect from '../../../components/QDatePicker/qSelect'
  import myProgress from './components/myProgress.vue'
  import topSelect from './components/topSelect.vue'
  import cbiProgress from '../../../components/progress'
  export default {
    name: "productLifeCycle",
    data(){
      return {
        showNoData: {
          noData2: false
        },
        paramsData: {
          family: ['T470'],
          family_shipment: [],
          cpu_vendor: [],
          cpu_series: [],
          memory_capacity: [],
          os_family: [],
          storage_type: [],
          hdd_capacity: [],
          ssd_capacity: [],
          panel_size: [],
          panel_aspect_ratio: [],
          panel_resolution: [],

          geo: [],
          smb_region: [],
          ebr_region: [],
          country: [],
          country_name: [],
          smb_segment: [],
          ebr_segment: [],
          sold_to_name: [],
          end_customer_name: [],
          channel: [],
//
          final_bu: [],
          smb_series: [],
//
          brand: [],
          form_factor: [],
          sub_form_factor: [],
          price_band: [],
          warranty_month: [],
        },
        quarterFlag: 'quarter',
        conditionIsShow: false,
        vsIsShow: false,
        billingMonth: [],
        billingQuarterFisData: [],
        selectOne: {
          options: [],
          value: []
        },
        selectTwo: {
          options: [],
          value: []
        },
        lifeCycleTableData: [],
        lifeCycleTableShow: false,
        progressTitleOne: '',
        progressVsTitleOne: '',
        progressTitleTwo: '',
        progressVsTitleTwo: '',
        volumeOrLifeOne: '',
        volumeOrLifeVsOne: '',
        volumeOrLifeTwo: '',
        volumeOrLifeVsTwo: '',
        progressDataOne: 0,
        progressVsDataOne: 0,
        progressDataTwo: 0,
        progressVsDataTwo: 0,
        noData1: true,
        noData2: true,
        volumeData: [],
        familyAllOptions: [],
        familyOptions1: [],
        familyOptions2: [],
//        familyValues:[],
        familyValue1: '',
        familyValue2: '',
        configuration: {
          cpuVendorOptions: [],
          cpuVendorValues: [],
          storageTypeOptions: [],
          storageTypeValues: [],
          ssdCapacityOptions: [],
          ssdCapacityValues: [],
          panelResolutionOptions: [],
          panelResolutionValues: [],
          osFamilyOptions: [],
          osFamilyValues: [],
          hddCapacityOptions: [],
          hddCapacityValues: [],
          cpuSeriesOptions: [],
          cpuSeriesValues: [],
          panelAspectRatioOptions: [],
          panelAspectRatioValues: [],
          memoryCapacityOptions: [],
          memoryCapacityValues: [],
          panelSizeOptions: [],
          panelSizeValues: [],
        },
        locationBp: {
          geoOptions: [],
          geoValues: [],
          countryOptions: [],
          countryValues: [],
          ebrRegionOptions: [],
          ebrRegionValues: [],
          smbSegmentOptions: [],
          smbSegmentValues: [],
          smbRegionOptions: [],
          smbRegionValues: [],
          countryNameOptions: [],
          countryNameValues: [],
          channelOptions: [],
          channelValues: [],
          ebrSegmentOptions: [],
          ebrSegmentValues: [],
          soldToName: [],
          endCustomerName: [],
          soldToNameValue: [],
          endCustomerNameValue: [],
        },
        deviceModel: {
          finalBuOptions: [],
          finalBuValues: [],
          smbSeriesOptions: [],
          smbSeriesValues: [],
        },
        other: {
          priceBandOptions: [],
          priceBandValues: [],
          warrantyMonthOptions: [],
          warrantyMonthValues: [],
          subFormFactorOptions: [],
          subFormFactorValues: [],
          brandOptions: [],
          brandValues: [],
          formFactorOptions: [],
          formFactorValues: [],
        },
        echartsDom: {
          chartRange: null,
          chartQuarter: null
        },
        echartsDatas: {
          chartRange: {
            name: [],
            chartRangeOne: {},
            chartRangeTwo: {},
          },
          chartQuarter: {
            name: [],
            chartQuarterOne: {},
            chartQuarterTwo: {},
          },
        },
        optionColors: ['#F5A623', '#4DCFA3'],
        loading: {
          chartRange: false,
          chartQuarter: false
        },
        timeButton: true,
        timeRange: [],
        shijianfangwei1: 2015,
        shijianfangwei2: 2018,
        qshijian: 2018,
        selectTime1: '',
        selectTime2: ''
      }

    },
    methods: {
      getSelectData(data){
        if (data && (data.family.length !== 0 || data.family_shipment.length !== 0)) {
          this.paramsData = {...data};
        }
        this.showChartRange();
        this.showChartQuarter();
        this.loadVolumeData();
        this.loadLifeCycleTableData();
        this.loadLifecycleData()
      },
      changeTimeButton(){
        this.timeButton = true;
        this.quarterFlag = 'quarter';
        this.selectTime1 = '';
        this.selectTime2 = '';
        this.billingMonth = [];
        this.billingQuarterFisData = [];
        this.showChartQuarter();
      },
      changeTimeButton2(){
        this.timeButton = false;
        this.quarterFlag = 'month';
        this.selectTime1 = '';
        this.selectTime2 = '';
        this.billingMonth = [];
        this.billingQuarterFisData = [];
        this.showChartQuarter();
      },
      selectTimeChange1(){
        if (this.selectTime1 !== '' && this.selectTime2 !== '') {
          this.showChartQuarter();
        }
      },
      selectTimeChange2(){
        if (this.selectTime1 !== '' && this.selectTime2 !== '') {
          this.showChartQuarter();
        }
      },
      getEchartsDom(){
        this.echartsDom.chartRange = this.echarts.init(document.getElementById('chart-range'))
        this.echartsDom.chartQuarter = this.echarts.init(document.getElementById('chart-quarter'))
      },
      initLoading(){
        this.loading = {
          chartRange: true,
          chartQuarter: true
        }
      },
      loadAllEchartsDatas(){
//        this.loadChartRangeData();
        this.showChartRange();
//        this.loadChartQuarterData()
        this.showChartQuarter()
      },
      async loadLifeCycleTableData(){
        let _this = this;
        let params = this.paramsData;
//        let params=data;
        if (params.family_shipment.length !== 0) {
          this.lifeCycleTableShow = true;
        } else {
          this.lifeCycleTableShow = false;
        }
        try {
          let res = await _this.axios.post('/product/lifecycle/planExitVolumeSumCa', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.lifeCycleTableData = resData.data.data;
          }
        } catch (e) {

        }
      },
      async loadVolumeData(){
        let _this = this;
        let params = this.paramsData;
//        let params = {
//          family: ['T470'],
//          family_shipment: [],
//          cpu_vendor: [],
//          cpu_series: [],
//          memory_capacity: [],
//          os_family: [],
//          storage_type: [],
//          hdd_capacity: [],
//          ssd_capacity: [],
//          panel_size: [],
//          panel_aspect_ratio: [],
//          panel_resolution: [],
//
//          geo: [],
//          smb_region: [],
//          ebr_region: [],
//          country: [],
//          country_name: [],
//          smb_segment: [],
//          ebr_segment: [],
//          sold_to_name: [],
//          end_customer_name: [],
//          channel: [],
////
//          final_bu: [],
//          smb_series: [],
////
//          brand: [],
//          form_factor: [],
//          sub_form_factor: [],
//          price_band: [],
//          warranty_month: [],
//        };
//        if (data) {
//          params = data;
//        }
        try {
          let res = await _this.axios.post('/product/lifecycle/planExitVolume', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data.length === 0) {
              this.noData1 = true;
            } else if (resData.data.data.length === 1) {
              this.noData1 = false;
              this.vsIsShow = false;
              let VolumeData = resData.data.data[0];
              this.progressTitleOne = VolumeData['family_shipment'];
              this.progressDataOne = VolumeData['plan_exit_volume'];
              this.volumeOrLifeOne = VolumeData.volume
            } else if (resData.data.data.length === 2) {
              this.noData1 = false;
              this.vsIsShow = true;
              let VolumeData1 = resData.data.data[0];
              let VolumeData2 = resData.data.data[1];
              this.progressTitleOne = VolumeData1['family_shipment'];
              this.progressDataOne = VolumeData1['plan_exit_volume'];
              this.progressVsTitleOne = VolumeData2['family_shipment'];
              this.progressVsDataOne = VolumeData2['plan_exit_volume'];
              this.volumeOrLifeOne = VolumeData1.volume;
              this.volumeOrLifeVsOne = VolumeData2.volume
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async loadLifecycleData(){
        let _this = this;
        let params = this.paramsData;
        try {
          let res = await _this.axios.post('/product/lifecycle/lifecycleAttain', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data.length === 0) {
              this.noData2 = true;
            } else if (resData.data.data.length === 1) {
              this.noData2 = false;
              this.vsIsShow = false;
              let lifecycleData = resData.data.data[0];
              this.progressTitleTwo = lifecycleData['family_shipment'];
              this.progressDataTwo = lifecycleData['lifecycle_attain'];
              this.volumeOrLifeTwo = lifecycleData.lifecycle;
            } else if (resData.data.data.length === 2) {
              this.noData2 = false;
              this.vsIsShow = true;
              let lifecycleData1 = resData.data.data[0];
              let lifecycleData2 = resData.data.data[1];
              this.progressTitleTwo = lifecycleData1['family_shipment'];
              this.progressDataTwo = lifecycleData1['lifecycle_attain'];
              this.progressVsTitleTwo = lifecycleData2['family_shipment'];
              this.progressVsDataTwo = lifecycleData2['lifecycle_attain'];
              this.volumeOrLifeTwo = lifecycleData1.lifecycle;
              this.volumeOrLifeVsTwo = lifecycleData2.lifecycle
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async showChartRange(){
        let _this = this;
        let params = this.paramsData;
//        let params = {
//          family: ['T470'],
//          family_shipment: [],
//          cpu_vendor: [],
//          cpu_series: [],
//          memory_capacity: [],
//          os_family: [],
//          storage_type: [],
//          hdd_capacity: [],
//          ssd_capacity: [],
//          panel_size: [],
//          panel_aspect_ratio: [],
//          panel_resolution: [],
//
//          geo: [],
//          smb_region: [],
//          ebr_region: [],
//          country: [],
//          country_name: [],
//          smb_segment: [],
//          ebr_segment: [],
//          sold_to_name: [],
//          end_customer_name: [],
//          channel: [],
////
//          final_bu: [],
//          smb_series: [],
////
//          brand: [],
//          form_factor: [],
//          sub_form_factor: [],
//          price_band: [],
//          warranty_month: [],
//        };
//        if (data) {
//          if (data.family.length === 2) {
//            this.vsIsShow = true;
//            params = {...data};
//          } else if (data.family_shipment.length === 2) {
//            this.vsIsShow = true;
//            params = {...data}
//          } else if (data.family.length === 1 && data.family_shipment.length === 1) {
//            this.vsIsShow = true;
//            params = {...data};
//          } else if (data.family.length === 1 && data.family_shipment.length === 0) {
//            this.vsIsShow = false;
//            params = {...data};
//          } else if (data.family.length === 0 && data.family_shipment.length === 0) {
//            data.family = ['T470'];
//            params = {...data};
//          }else if(data.family.length === 0 && data.family_shipment.length === 1){
//            this.vsIsShow = false;
//            params = {...data};
//          }
//        }
        try {
          this.loading.chartRange = true;
          let res = await _this.axios.post('/product/lifecycle/caByRange', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.echartsDom.chartRange.clear();
            this.echartsDom.chartRange.hideLoading();
            let xData = [];
            let seriesData = [];
            let legendData = [];
            if (resData.data.m_flag) {
              xData = resData.data.m_flag
            }
            if (resData.data.average) {
              let obj1 = resData.data.average;
              for (let key in obj1) {
                let arr1 = [];
                for (let i = 0; i < xData.length; i++) {
                  arr1.push(obj1[key])
                }
                seriesData.push({
                  name: key,
                  data: arr1,
                  lineStyle: {
                    type: 'dotted',
                  },
                  type: 'line',
                  smooth: true,
                })
              }
            }
            if (resData.data.data && JSON.stringify(resData.data.data) !== "{}") {
              let obj = resData.data.data;
              for (let key in obj) {
                legendData.push(key);
                seriesData.push({
                  name: key,
                  data: obj[key],
                  lineStyle: {
                    normal: {
                      width: 4,
                      // shadowColor: 'rgba(116, 35, 244, 0.5)',
                      // shadowBlur: 12,
                      // shadowOffsetX: 0,
                      // shadowOffsetY: 5,
                    }
                  },
                  type: 'line',
                  smooth: true,
                  smoothMonotone: 'none',
//                 markLine: {
//                 data: [
//                   {type: 'average', name: '平均值'}
//                 ]
//               }
                })
              }
              let option = {
                color: this.optionColors,
//          tooltip: {
//            trigger: 'none',
//            axisPointer: {
//              type: 'cross'
//            }
//          },
                tooltip: {
                  confine: true,
                  trigger: 'axis',
                  axisPointer: {
                    lineStyle: {
                      color: '#f5f5f9'
                    }
                  },
                  backgroundColor: 'rgba(255,255,255,1)',
                  padding: [5, 10],
                  textStyle: {
                    color: '#7588E4',
                  }
                },
                legend: {
                  data: legendData
                },
                grid: {
                  top: 70,
                  bottom: 50
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  axisLine: {
                    lineStyle: {
                      color: '#f5f5f9'
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: '#959eaf'
                  },
                  data: xData
                },
                yAxis: {
                  axisLine: {
                    lineStyle: {
                      color: '#f5f5f9'
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: '#959eaf'
                  },
                  splitLine: {
                    lineStyle: {
                      color: ['#f5f5f9']
                    }
                  },
                  type: 'value'
                },
                series: seriesData
              };
              this.echartsDom.chartRange.setOption(option);
            } else {
//              this.echartsDom.chartRange.clear();
              this.loading.chartRange = false;
              this.echartsDom.chartRange.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              })
            }
          }
        } catch (e) {
          this.echartsDom.chartRange.clear();
          console.log(e);
        }
        this.loading.chartRange = false;
      },
      makeQuarter(val){
        let a = parseInt(val.substring(2, 4)) + 1;
        let arr = val.split('');
        arr.splice(4, 0, a.toString());
        return arr.join('')
      },
      async showChartQuarter(){
        let _this = this;
        let params = {...this.paramsData};
        params['billing_quarter_fis'] = [];
        params['billing_month'] = [];
        if (this.timeButton) {
          if (this.selectTime1 !== '' && this.selectTime2 !== '') {
            this.billingQuarterFisData = [this.selectTime1, this.selectTime2]
          } else if ((this.selectTime1 !== '' && this.selectTime2 === '') || (this.selectTime1 === '' && this.selectTime2 !== '')) {
            alert('时间需要两个值')
          }
          params['billing_quarter_fis'] = this.billingQuarterFisData;
        } else {
          if (this.selectTime1 !== '' && this.selectTime2 !== '') {
            this.billingMonth = [this.selectTime1, this.selectTime2]
          } else if ((this.selectTime1 !== '' && this.selectTime2 === '') || (this.selectTime1 === '' && this.selectTime2 !== '')) {
            alert('时间需要两个值')
          }
          params['billing_month'] = this.billingMonth;
        }
        params['quarter_flag'] = this.quarterFlag;
        try {
          this.loading.chartQuarter = true;
          let res = await _this.axios.post('/product/lifecycle/caByFYQuarter', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.echartsDom.chartQuarter.clear();
            this.echartsDom.chartQuarter.hideLoading();
            let xData = [];
            let seriesData = [];
            let legendData = [];
            if (resData.data['x-axis'].length !== 0) {
              xData = resData.data['x-axis'];
              let reg = /^FY(\d{2})Q\d$/;
              xData = xData.map((item) => {
                if (reg.test(item)) {
                  return this.makeQuarter(item)
                } else {
                  return item;
                }
              })
            } else {
              this.loading.chartQuarter = false;
              this.echartsDom.chartQuarter.showLoading('default', {
                text: 'No Data',
                color: '#fff',
                textColor: '#959595',
                maskColor: 'rgb(255, 255, 255)',
                zlevel: 0
              });
              return;
            }
            if (resData.data.data) {
//              this.showNoData.noData2=false;
              let obj = resData.data.data;
              for (let key in obj) {
                legendData.push(key);
                seriesData.push({
                  name: key,
                  data: obj[key],
                  type: 'bar',
                  barMaxWidth: 20,
                  stack: 'sum'
                })
              }
            } else {
              this.echartsDom.chartQuarter.clear();
//                this.showNoData.noData2=true;
            }
            let option = {
              color: this.optionColors,
              tooltip: {
                confine: true,
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
//          grid: {
//            left: '3%',
//            right: 0,
//            bottom: '3%',
//            containLabel: true
//          },
              grid: {
                top: 30,
                bottom: 100
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
//              rotate: 45,
                  fontSize: 12,
                  color: '#959eaf'
                },
                data: xData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#959eaf'
                }
              },
              series: seriesData
            };
            this.echartsDom.chartQuarter.clear();
            this.echartsDom.chartQuarter.setOption(option);
          }
        } catch (e) {
          this.echartsDom.chartQuarter.clear();
          console.log(e);
        }
        this.loading.chartQuarter = false;
      },
      echartsResize(){
        let _this = this;
        setTimeout(() => {
          _this.echartsDom.chartRange.resize();
          _this.echartsDom.chartQuarter.resize();
        }, 200)
      },
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
    },
    watch: {
      'sidebar.opened': function () {
        this.echartsResize()
      }
    },
    components: {
      myProgress,
      cbiProgress,
      qSelect,
      topSelect
    },
    mounted(){
      this.getEchartsDom();
      this.initLoading();
      this.getSelectData();

      window.onresize = () => {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .product-lifeCycle {
    .nodata {
      width: 100%;
      height: 100%;
      text-align: center;
      position: relative;
      top: 100px;
      z-index: 1;
    }
    .progress-part {
      .chart-title {
        font-family: OpenSans-CondensedBold;
        font-size: 16px;
        color: #333333;
        margin-bottom: 20px;
      }
      .progress-data {
        .noData {
          text-align: center;
          font-weight: bold;
        }
        .progress-box {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
        }
        .progress-box-vs {
          .progress-bar-inner {
            background: #4DCFA3;
          }
        }
      }
      .el-card {
        overflow: visible;
      }
    }
    .progress-part-vs {
      .progress-data {
        .progress-vs {
          margin-top: 10px;
        }
      }
    }
    .product-header {
      overflow: visible;
      .condition-header {
        .condition-header-right {
          .select-one {
            /*width: 200px;*/
            /*height: 40px;*/
            .mul-select {
              width: 100%;
            }
          }
        }
      }
      .condition-box {
        .el-select {
          margin-bottom: 10px;
        }
        .el-input {
          margin-bottom: 10px;
        }
      }
      .footer-icon {
        padding-bottom: 8px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-family: MicorsoftYaHei;
        color: #333;
      }
    }
    .chart-range-box {
      .chart-range-title {
        font-family: OpenSans-CondensedBold;
        font-size: 16px;
        color: #333333;
      }
      .chart-range {
        width: 100%;
        height: 35vh;
      }
    }
    .chart-quarter-box {
      min-height: 40vh;
      .header {
        /*overflow: hidden;*/
        /*position: relative;*/
        .chart-quarter-title {
          float: left;
          font-family: OpenSans-CondensedBold;
          font-size: 16px;
          color: #333333;
        }
        .chart-quarter-select {
          float: right;
          position: relative;
          top: -12px;
          .time-select {
            display: inline-block;
            margin-right: 15px;
            span {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #000000;
              letter-spacing: 0;
              line-height: 16px;
              margin-right: 6px;
            }
            .time-select-quarter {
              display: inline-block;
              .qselect {
                height: 36px;
                width: 195px;
                .label-span {
                  line-height: 36px !important;
                }
              }
            }
            .time-select-month {
              display: inline-block;
              .el-date-editor {
                width: 195px;
              }
            }
            /*.el-date-editor {*/
            /*width: 270px;*/
            /*height: 36px;*/
            /*padding: 0 10px;*/
            /*}*/
          }
          .time-button {
            .el-button-group {
              .el-button {
                padding: 9px 10px;
                top: -2px;
              }
            }
          }
          .time-button {
            display: inline-block;
          }
        }
      }
      .chart-quarter {
        width: 100%;
        height: 40vh;
        top: 28px;
      }
    }
  }

</style>
